<template>
  <xy-page title="">
    <xy-breadcrumb></xy-breadcrumb>
    <xy-search class="mgt20">
      <el-form inline :model="searchFilter" label-width="70px">
        <el-form-item label="系统" prop="">
          <el-select v-model="appId" placeholder="请选择系统" :disabled="!!this.id">
            <el-option v-for="item in appList" :key="item.id" :label="item.cnName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="right">
        <el-button plain @click="resetForm">重置条件</el-button>
      </div>
    </xy-search>
    <div>
      <div style="text-align:right;" v-if="appId">
        <div class="form-row form-group ">
             <div>
               <el-button type="primary" size="small" v-show="submitData.isAdmin == 0" @click="globalAllResource">所有权限</el-button>
               <el-button type="plain" size="small" v-show="submitData.isAdmin == 0" @click="globalReadResource">所有只读</el-button>
               <span style="margin:0 10px;">是否拥有所有菜单:</span>
               <el-radio  v-model="submitData.isAdmin" :label="1">是</el-radio>
                <el-radio v-model="submitData.isAdmin" :label="0">否</el-radio>
                <xy-save style="margin-left:30px;"  v-model="isSave" type="primary" size="small" @click="save" text="保存中..." v-auth="'AUTH_USER-SAVE'">保存</xy-save>
                <xy-save  v-show="!!$utils.getParam('appUserInstanceId') && submitData.isAdmin == 0" v-model="isResetInstance" type="plain" size="small" @click="resetInstance" text="重置中..." v-auth="'AUTH_USER-SAVE'">重置实例</xy-save>
                
             </div>
            
          </div>
        
        
      </div>
      <div style="display:inline-block;width:25%;vertical-align:top;" v-show="submitData.isAdmin == 0">
        <el-tree
          ref="tree"
          :data="treeData"
          node-key="id"
          :props="defaultProps"
          default-expand-all
          empty-text="请选择系统"
          :expand-on-click-node="false"
          @check-change="checkChange"
          show-checkbox
          >
        </el-tree>
      </div>
      <div style="display:inline-block;width:25%;vertical-align:top;" v-show="submitData.isAdmin == 0">
        <el-tree
          :data="treeSelectData"
          node-key="id"
          :props="defaultProps"
          default-expand-all
          :highlight-current="true"
          @node-click="nodeClick"
          empty-text="请选择菜单"
          :expand-on-click-node="false"
          >
           <span class="custom-tree-node"   slot-scope="{ node, data }">
              <span >{{ node.label }}</span>
              <span v-if="data.resources.length == 0 || data.level != 3" style="font-size:12px;" class="">(无需设置)</span>
              <span v-else-if="data.menuResources.length == data.resources.length" style="font-size:12px;" class="deep-green">(所有权限)</span>
              <span v-else-if="data.menuResources.length == 0" style="font-size:12px;" class="red">(无权限)</span>
              <span v-else style="font-size:12px;" class="green">(部分权限)</span>
              
           </span>
        </el-tree>
      </div>

      <div style="display:inline-block;width:49%;vertical-align:top;" v-show="submitData.isAdmin == 0 && menu && Object.keys(menu).length > 0 && menu.resources.length > 0">
        <div style="margin-bottom:10px;">
          <el-button type="primary" size="small" @click="allResource">所有</el-button>
          <el-button type="plain" size="small" @click="readResource">只读</el-button>
        </div>
        <el-transfer 
            filter-placeholder="请输入资源名称" 
            v-model="menu.menuResources" 
            :data="menuResources"
            :titles="['全部权限', '所选权限']"
            :props="{
              key: 'id',
              label: 'name'
            }"
            >
            </el-transfer>
      </div>
      
    </div>
  </xy-page>
    
  </template>

  <script>
  export default {
    name:"auth-app-user-instance-edit",
    data(){
      return {
        id:null,
        searchFilter:{},
        appId:null,
        appList:[],
        treeData: [],
        treeSelectData:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        menuResource:{},
        menuResources:[],
        isSave:false,
        isResetInstance:false,
        menu:{},
        submitData:{
          isAdmin:0,
          id:0,
          appId:0,
          menuIds:[]
        }
      }
    },
    methods:{    
      globalAllResource(){
        this.treeSelectData.forEach(item1 => {
         item1.children.forEach(item2 => {
            item2.children.forEach(item3 => {
              item3.menuResources = JSON.parse(JSON.stringify(item3.resources));
            });
         });
        });
      },
      globalReadResource(){
        this.treeSelectData.forEach(item1 => {
         item1.children.forEach(item2 => {
            item2.children.forEach(item3 => {
              item3.menuResources = [];
              item3.resources.forEach(resourceId => {
                let r = this.menuResource[resourceId];
                if(r && r.type !== 2){
                  item3.menuResources.push(resourceId);
                }
              });
            });
         });
        });
      },
      readResource(){
        if(!this.menu) return;
        this.menu.menuResources =  [];
        this.menuResources.forEach(item => {
          if(item.type !== 2){
            this.menu.menuResources.push(item.id);
          }
        });
      },
      allResource(){
        if(!this.menu) return;
        this.menu.menuResources =  [];
        this.menuResources.forEach(item => {
          this.menu.menuResources.push(item.id);
        });
      },
      nodeClick(menu){
        if(menu.id == -1){
          menu = {};
        }
        this.menu = menu;
        this.menuResources = [];
        this.menu.resources.forEach( item => {
          this.menuResources.push(this.menuResource[item]);
        });
      },  
      checkChange() {
        this.menu = {};
        var nodes = this.$refs.tree.getCheckedNodes();
        if(!nodes || nodes.length == 0){
          this.treeSelectData = [];
        }
        //获取children 数量为0的菜单
        var childrenNode = [];
        var ids = [];
        nodes.forEach(item => {
          if(!item.children || item.children.length == 0){
            childrenNode.push(item);
            ids.push(item.id);
          }
        });

        if(childrenNode.length == 0){
          return this.treeSelectData = [];
        }

        this.treeSelectData = [];

        var selectTreeNode = {};
        var tmpTreeData = JSON.parse(JSON.stringify(this.treeData[0].children));
        tmpTreeData.forEach(item1 => {
          item1.children.forEach(item2 => {
            item2.children.forEach(item3 => {
              if(ids.indexOf(item3.id) != -1){
                selectTreeNode[item1.id] = item1; 
                selectTreeNode[item2.id] = item2; 
                selectTreeNode[item3.id] = item3; 
                let itemMenu = null;
                if(this.submitData.menuList){
                  this.submitData.menuList.forEach(menu => {
                    if(itemMenu){
                      return;
                    }
                    if(menu.menuId == item3.id && menu.resources){
                      itemMenu = menu;
                    }
                  });
                }
                item3.menuResources = [];
                if(itemMenu){
                  let resources = itemMenu.resources.replace(/^,/,"").replace(/,$/,"");
                  resources = resources.split(",");
                  resources.forEach(resourceId => {
                    item3.menuResources.push(Number(resourceId));
                  });
                }else{
                  item3.menuResources = JSON.parse(JSON.stringify(item3.resources));
                }
                
              }
            });
          });
        });

        for(var key in selectTreeNode){
          selectTreeNode[key].children = [];
        }
         for(var key in selectTreeNode){
          if(!selectTreeNode[key].parentId){
            this.treeSelectData.push(selectTreeNode[key]);
          }else{
            var parent = selectTreeNode[selectTreeNode[key].parentId];
            if(!parent){
              continue;
            }
            parent.children.push(selectTreeNode[key]);
          }
        }
      },
      resetInstance(){
         this.$xyConfirm("确认是否重置实例，重置后修改的数据将无法恢复？",()=>{
           this.isResetInstance = true;
           this.resetData(()=>{
             this.isResetInstance = false;
           });
         });
      },
      
      initMenuResource(menus){
        if(!menus || menus.length == 0){
          return;
        }
        menus.forEach(menu => {
          menu.resources = menu.resources || "";
          menu.resources = menu.resources.replace(/^,/,"").replace(/,$/,"");
          if(menu.resources){
            menu.resources = menu.resources.split(",");
            for(let i=0;i<menu.resources.length;i++){
              menu.resources[i] = Number(menu.resources[i]);
            }
          }else{
            menu.resources = [];
          }
          this.initMenuResource(menu.children);
        });
      },
      setLevel(data,level,sort){
        level = level || 0;
        sort = sort || 0;
        if(!data || data.length == 0){
          return sort;
        }
        data.forEach(item => {
          item.level = level;
          if(level <= 1){
            item.type = 3;
          }else if(!item.type){
            item.type = 1;
          }
          item.appId = this.appId;
          item.sort = sort++;
          item.children = item.children || [];
          sort = this.setLevel(item.children,level + 1,sort);
        });
        return sort;
      },
      resetData(cb){
        if(this.submitData.menuList){
          this.submitData.menuList.forEach(item => {
            item.resources = item.oldResources || "";
          });
        }
        this.menu = {};
        this.treeData = [];
        this.$nextTick(()=>{
          this.$get("/admin/auth/instance/authMenu/list.do",{
            data:{
              appId:this.appId
            },
            success:res => {
              this.treeData = res.object || [];
              this.treeData = [{
                  id:-1,
                  name:"全部菜单",
                  children:this.treeData
                }
              ];
              this.initMenuResource(this.treeData);
              this.setLevel(this.treeData);
              this.treeSelectData = [];
              if(!this.id){
                this.submitData = this.$options.data().submitData;
              }else{
                this.setCheckedKeys();
              }
              this.getMenuResources(cb);
            }
          })
        });
        
      },
      setCheckedKeys(){
        this.$nextTick(()=>{
          var ids = [];
          if(this.submitData.menuList){
            this.submitData.menuList.forEach(item => {
              var node = this.$refs.tree.getNode(item.menuId);
              if(!node || (node.data.children && node.data.children.length > 0) ){
                return true;
              }
              ids.push(item.menuId);
            });
          }
          this.$refs.tree.setCheckedKeys(ids);
          this.checkChange();
          this.$nextTick(()=>{
            if(this.submitData.menuList){
              this.submitData.menuList.forEach(item => {
                item.oldResources = item.resources;
                item.resources = "";
              });
            }
          });
        });
      },
      _getMenus(menus,data){
        if(!data || data.length == 0){
          return;
        } 
        data.forEach(item => {
          let r = item.menuResources || [];
          r = r.join(",");
          if(r){
            r = ","+r+","
          }
          menus.push({
            menuId:item.id,
            resources:r
          });
          this._getMenus(menus,item.children);
        });
      },
      save(){
        this.isSave = true;

        var menus = [];
        this._getMenus(menus,this.treeSelectData);
        this.submitData.menus = menus;
        console.log(this.submitData)
        this.$postStream("/admin/auth/instance/authRole/save.do",{
          data:this.submitData,
          success:(res)=>{
            this.isSave = false;
            if(!res.success){
              return this.$message.error(res.message);
            }
            this.$message.success(res.message);
            this.$toPage('/auth-role/list');
          }
        });
      },
       getMenuResources(cb){
        this.$postStream("/admin/auth/instance/authResources/listForApp.do", {
          data: {
            appId:this.appId
          },
          success: res => {
            
            if (res.success) {
              let resource = res.object || [];

              this.menuResource = {};

              resource.forEach(item => {
                this.menuResource[item.id] = item;
              });
              
            } else {
              this.$message.error(res.message);
            }
            cb && cb();
            
          },
          error: () => {}
        });
      },
      resetForm(){
        this.$postStream("/admin/auth/instance/authApp/list.do", {
          data: {},
          success: res => {
            if (res.success) {
              this.appList = res.object.list || [];
            } else {
              this.$message.error(res.message);
            }
          },
          error: () => {}
        });
      }
    },
    mounted() {
     
      this.id = this.$utils.getParam("id");
      if(!this.id){
        this.$close(true);
        return this.$toPage("/auth-role/list");
      }
      this.resetForm();
      
      if(this.id){
        this.$get("/admin/auth/instance/authRole/get.do",{
          data:{
            id:this.id
          },
          success:(res)=>{
            if(!res.success){
              return this.$message.error(res.message);
            }
            this.appId = res.object.appId;
            this.submitData = res.object;

            this.submitData.menuList = this.submitData.menuList || [];
            this.submitData.menuList.forEach(item => {
                item.oldResources = item.resources;
            });
          }
        });
      }
     
    },
    activated() {

      this.id = this.$utils.getParam("id");
      if(!this.id){
        this.$close(true);
        return this.$toPage("/auth-role/list");
      }
      this.resetForm();
      if(this.id){
        this.$get("/admin/auth/instance/authRole/get.do",{
          data:{
            id:this.id
          },
          success:(res)=>{
            if(!res.success){
              return this.$message.error(res.message);
            }
            this.appId = res.object.appId;
            this.submitData = res.object;
            this.submitData.menuList = this.submitData.menuList || [];
            this.submitData.menuList.forEach(item => {
                item.oldResources = item.resources;
            });
          }
        });
      }
    },
    watch:{
      appId(){
        if(!this.appId){
          return;
        }
        this.resetData();
      }
    }
  }
  </script>

  <style lang="scss">
  .lineThrough{
    text-decoration:line-through
  }
  .custom-tree-node{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 10px;
  }
   .el-transfer__buttons{
    padding:0 6px;
  }
  .el-transfer__button{
    border-radius:50%;
    font-size:0;
    min-width:0;
    padding:0;
    height: 34px;
    width: 34px;
    line-height: 34px;
  }
  </style>
  

  
  